<template>
    <div>
        <h1>薪资项</h1>
        <el-form :model="formData" ref="form" :rules="rules" label-width="80px" :inline="true">
            <el-form-item label="部门">
                <el-input v-model="formData.departmental"></el-input>
            </el-form-item>
            <el-form-item label="岗位">
                <el-input v-model="formData.postsName"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadData">查询</el-button>
                <el-button @click="toInsert" type="primary">新增</el-button>
            </el-form-item>
        </el-form>
        
        <el-table :data="page.records" border stripe @row-click="toUpdate"  
     >
            <el-table-column type="index" width="50" />
            <el-table-column v-for="col in columns"
                :prop="col.id"
                :key="col.id"
                :label="col.label"
                :width="col.width">
            </el-table-column>
            
        </el-table>

        <el-pagination
            @current-change="loadData" 
            v-model:currentPage="page.current" 
            :page-sizes="[2, 4, 6, 8,10]" 
            :page-size="page.size"
            :total="page.total" background>
        </el-pagination>
        <el-dialog
            :destroy-on-close="true"
            :title="title"
            v-model="isVisible"
            width="60%">
            <span></span>
            <template #footer>
            <span>
                <router-view @ref-table="refTable" :data="data"></router-view>
            </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import request from '@/api/request.js'
import router from '@/router'

//判断是否显示弹窗
let isVisible = ref(false)

let title=ref("");

let refTable=()=>{
    isVisible.value = false
    loadData();
}

//新增
let toInsert = (route) => {
    isVisible.value = true
    router.push("/salary/setup/disposition/insert")
}
let data = ref({})

//编辑
let toUpdate = (row,route) => {
    data.value = row
    isVisible.value = true
    router.push("/salary/setup/disposition/update")
}

const page = ref({
    current: 1,
    size:10,
    total: 0,
    records: []
})
const columns = [
    {id:'departmental', label: '部门'},
    {id:'postsName', label: '岗位'},
    { id: 'baseSalary', label: '岗位工资'},
    { id: 'paySalary', label: '绩效工资'},
    { id: 'bonus', label: '奖金'},
    {id:'seniorityWages',label:"工龄补贴"},
    {id:'transportationSubsidy', label: '交通补贴'},
    {id:'housingAllowance', label: '住房补贴'},
    {id:'mealSubsidy',label: '餐饮补贴'},
    {id:'otherSubsidies',label: '其他补贴'}
]
let formData = ref({})
let loadData = () => {
    request({
        url: '/salary/setup/disposition',
        method: 'get',
        params: {
            current:page.value.current,
            size:page.value.size,
            ...formData.value
        }
    }).then(res => {
        page.value = res.data
    })
}
loadData()
</script>

<style scoped>

</style>
